<template>
  <el-container>
    <el-main>
      <vue-particles
        color="#dedede"
        :particleOpacity="0.7"
        :particlesNumber="80"
        shapeType="circle"
        :particleSize="4"
        linesColor="#dedede"
        :linesWidth="1"
        :lineLinked="true"
        :lineOpacity="0.4"
        :linesDistance="150"
        :moveSpeed="3"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="true"
        clickMode="push"
      >
      </vue-particles>
      <el-form ref="form" :rules="rules" size="mini" :model="formData">
        <div class="login_box">
          <el-row>
            <el-col :span="24">
              <el-form-item label="用户名：" prop="username">
                <el-input class="input" placeholder="请输入邮箱/手机号" v-model.trim="formData.username" style="width: 100%;"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="密码：" prop="password">
                <el-input class="input" type="password" placeholder="请输入密码" v-model.trim="formData.password" style="width: 100%;"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="margin-top: 25px">
            <el-col :span="24" align="center">
              <el-button type="primary" @click="login" style="width: 100%">登录</el-button>
            </el-col>
          </el-row>
        </div>
      </el-form>
    </el-main>
  </el-container>
</template>

<script>
import Vue from 'vue'
import axios from '@/axios/index'
import {
  Container,
  Main,
  Row,
  Col,
  Form,
  FormItem,
  Input,
  Message
} from 'element-ui'

Vue.use(Container)
Vue.use(Main)
Vue.use(Row)
Vue.use(Col)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)

export default {
  data () {
    return {
      formData: {},
      rules: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {max: 20, message: '用户名不可超过20个字符', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 4, max: 16, message: '密码为6-16位字符', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    login () {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          axios.post('/user/findUserByLogin', this.formData).then(res => {
            if (res.errCode === 0) {
              sessionStorage.setItem('user', JSON.stringify(res.data))
              sessionStorage.setItem('userId', res.data.id)
              this.$router.push('/index')
            } else {
              Message({showClose: true, message: res.errMsg, type: 'error'})
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="css" scoped>
.el-container {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url('../../assets/images/sky.871d198.jpg') repeat-x top left;
  background-size: auto 100%;
}

.el-main {
  padding: 0;
  overflow: hidden;
}

.vue-particles {
  width: 100%;
  height: 100%;
}

.login_box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 360px;
  margin-top: -200px;
  margin-left: -180px;
  padding: 36px;
  background-color: rgba(0, 0, 0, .2);
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 5px;
  color: #444;
}
.el-form-item--mini >>> .el-form-item__label {
  color: #FFF;
}
.el-form-item--mini >>> .el-form-item__content, .el-form-item--mini >>> .el-form-item__label {
  line-height: 36px;
}
.el-input--mini >>> .el-input__inner {
  height: 36px;
  line-height: 36px;
  font-size: 14px;
}
</style>
